/**
 * Created by mapbar_front on 2018/3/14.
 */

import React,{ Component } from 'react';
import { Form, Icon, Input, Button,InputNumber,TreeSelect,Checkbox,Row,Col } from 'antd';
const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;
const CheckboxGroup = Checkbox.Group;
//水平登录栏，常用在顶部导航栏中
class TestSubmit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isTrue: true
        }
    }
    componentDidMount() {
        this.props.form.validateFields();
    }
    /**
     *
     * onSubmitEvent() 提交
     */
    onSubmitEvent(e) {
        e.preventDefault();
        console.log("提交");
        this.props.form.validateFields((err,value)=>{
            // if(!err) {
            //    console.log('看看');
            //    console.log('value是',value);
            // }else {
            //     console.log('我们看打印的是什么：',err);
            // }
            console.log('value是',value);
        });
    }
    handleChange(value) {
        let filterValue = value && value.filter((item,index)=>{
            return item !== '工单组';
        })
        console.log('过滤之后的数据：',filterValue);
        this.setState({ 
            value: filterValue,
        })
    }
    selectEvent (value, node, extra) {
        console.log('value',value);
        console.log('node',node);
        console.log('extra',extra);
        // let filterValue = value && value.filter((item,index)=>{
        //     return item !== '工单组';
        // })
        //console.log('filterValue的值是：',filterValue);
    }
    checkboxEvent(value) {
        console.log('checkboxEvent的值为：',value);
    }
    checkbox(value) {
        console.log('checkbox的值为：',value);
    }
    checkboxEvent1(value) {
        console.log('checkboxEvent1的值为：',value);
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        //const options = ['发送客户','发送受理人'];
        const options = [
            { label: '发送客户',value: 1 },
        ]
        return (
            <Form onSubmit={ this.onSubmitEvent.bind(this)}>
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('checkboxValue1',{
                            //rules: [{ required: true, message: '请输入你的密码!' }],
                            //initialValue: [0]
                        })(
                            <CheckboxGroup options={ options } style={{ width: '100%' }} onChange={this.checkboxEvent1.bind(this)} />
                        )
                    }
                </FormItem>
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('checkbox',{
                            //initialValue: [ '发送客户' ],
                            //rules: [{ required: true, message: '请输入!' }],
                        })(
                            <Checkbox tyle={{ width: '100%' }} onChange={this.checkbox.bind(this)}>
                                发送客户
                            </Checkbox>
                        )
                    }
                </FormItem>
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('userName',{
                            rules: [
                                { required: true, message: '请输入你的姓名!'},
                                { max: 30,message: '不能超过30个字符'}
                            ]
                        })(
                            <Input prefix={<Icon type="user" style={{ width: '50%',color: 'rgba(0,0,0,0.25)' }} /> }
                                   placeholder="请输入用户名"
                                   //onChange = { this.userNameChange.bind(this) }
                            />
                        )
                    }
                </FormItem>
                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('password',{
                            rules: [{ required: true, message: '请输入你的密码!' }],
                        })(
                            <Input prefix={ <Icon type="lock" style={{ width: '50%',color: 'rgba(0,0,0,0.25)'}} />}
                                   placeholder="请输入密码"
                                   type="password"
                                   //onChange = { this.passwordChange.bind(this) }
                            />
                        )
                    }
                </FormItem>

                <FormItem style={{ width: '50%'}}>
                    {
                        getFieldDecorator('checkboxValue',{
                            rules: [{ required: true, message: '请输入你的密码!' }],
                        })(
                            <Checkbox.Group style={{ width: '100%' }} onChange={this.checkboxEvent.bind(this)}>
                                <Row>
                                    <Col span={8}><Checkbox value="1">发送客户</Checkbox></Col>
                                </Row>
                            </Checkbox.Group>
                        )
                    }
                </FormItem>
                {/* <FormItem>
                    {
                        getFieldDecorator('email',{
                            rules: [{ required: true, message: '邮件客服不能为空!' }],
                        })(
                            <TreeSelect
                                value={ this.state.value }
                                style={{ width: 600 }}
                                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                                placeholder="Please select"
                                treeDefaultExpandAll
                                showSearch
                                allowClear
                                multiple
                                onChange = { this.handleChange.bind(this) }
                                onSelect = { this.selectEvent.bind(this) }
                            >
                                <TreeNode value="开发组" title="开发组" key="0" disabled>
                                    <TreeNode value="开发组1" title="开发组1" key="0-1"></TreeNode>
                                    <TreeNode value="开发组2" title="开发组2" key="0-2"></TreeNode>
                                </TreeNode>
                                <TreeNode value="测试组" title="测试组" key="1">
                                    <TreeNode value="测试组1" title="测试组1" key="1-1"></TreeNode>
                                    <TreeNode value="测试组2" title="测试组2" key="1-2"></TreeNode>
                                </TreeNode>
                                <TreeNode value="工单组" title="工单组" key="3">
                                    <TreeNode value="工单组1" title="工单组1" key="3-1"></TreeNode>
                                    <TreeNode value="工单组2" title="工单组2" key="3-2"></TreeNode>
                                </TreeNode>
                                <TreeNode title="AI组" key="4">
                                    <TreeNode value="AI组1" title="AI组1" key="4-1"></TreeNode>
                                    <TreeNode value="AI组2" title="AI组2" key="4-2"></TreeNode>
                                </TreeNode>
                            </TreeSelect>
                        )
                    }
                    
                </FormItem> */}
                <FormItem>
                    <Button
                        type="primary"
                        htmlType="submit"
                    >
                        提交
                    </Button>
                </FormItem>
            </Form>
        )
    }
}
export default Form.create()(TestSubmit);

